<template>
  <div class="home">
    <el-header class="top">
      <img
        src="../../../assets/img/aside.png"
        style="width: 20px; height: 18px; cursor: pointer"
      />

      <el-button type="primary" class="btn">
        {{ route.meta.title }}
      </el-button>

      <div class="ml20 fs18">您好：中煤北京煤矿机械有限公司！</div>
    </el-header>
    <!-- top -->
    <div class="header">
      <div class="left">
        <div class="df">
          <div class="t1"></div>
          <div class="p">常用功能</div>
        </div>
        <div class="df" style="width: 60%">
          <!-- 信息发布 -->
          <div class="mar">
            <img src="../../../assets/img/xinxi.png" />
            <div class="mt2 w56">信息发布</div>
          </div>
          <!-- 我的积分 -->
          <div class="mar">
            <img src="../../../assets/img/积分.png" />
            <div class="mt2 w56">我的积分</div>
          </div>
          <!-- 收藏列表 -->
          <div class="mar">
            <img src="../../../assets/img/收藏.png" />
            <div class="mt2 w56">收藏列表</div>
          </div>
          <!-- 订阅列表 -->
          <div class="mar">
            <img src="../../../assets/img/订阅1.png" />
            <div class="mt2 w56">订阅列表</div>
          </div>
          <!-- 订阅设置 -->
          <div class="mar">
            <img src="../../../assets/img/设置2x.png" />
            <div class="mt2 w56">订阅设置</div>
          </div>
          <!-- 推送设置 -->
          <div class="mar">
            <img src="../../../assets/img/设置推送2x.png" />
            <div class="mt2 w56">推送设置</div>
          </div>
          <!-- 添加常用功能 -->
          <div class="mar" @click="drawer2 = true" style="margin-right: 10px">
            <img src="../../../assets/img/常用x.png" />
            <div class="mt2 w56" style="width: 84px">添加常用功能</div>
          </div>
        </div>
      </div>

      <div class="center"></div>
      <div class="right">
        <div class="right1">
          <div class="df">
            <div class="t1"></div>
            <div class="p">客服信息</div>
          </div>
          <div>
            <div class="df">
              <div>
                <div class="mt30 ml30 fs14 ch" style="width: 122px">
                  客服代表：<span class="black">欧新玉</span>
                </div>
                <div class="mt15 ml30 fs14 ch" style="width: 180px">
                  客服电话：<span class="black">19235653079</span>
                </div>
                <div class="mt15 ml30 fs14 ch" style="width: 180px">
                  投诉电话：<span class="black">400-9988-557</span>
                </div>
              </div>
              <!-- 二维码 -->
              <div style="float: right">
                <img
                  src="../../../assets/img/蒙版组 289@2x.png"
                  alt=""
                  style="width: 80px; height: 80px; margin-right: 10px"
                />
                <div style="margin-top: 10px; font-size: 10px">
                  扫描添加专属客服
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="right2">
          <div class="df">
            <div class="t1"></div>
            <div class="p">会员信息</div>
          </div>
          <!-- 会员信息 -->
          <!-- 图片 -->
          <div>
            <div class="df">
              <img
                src="../../../assets/img/v2x.png"
                alt=""
                style="width: 90px; height: 72px; margin: 30px 0 0 5px"
              />
              <div style="display: block; margin-top: 20px">
                <div style="font-size: 13px">
                  <span style="color: #a9b1be">会员级别：</span>
                  <span>标准会员</span>
                  <span style="color: #f43107; margin-left: 3px">升级会员</span>
                </div>
                <div style="font-size: 13px; margin: 10px 0">
                  <span style="color: #a9b1be">开通时间：</span>
                  <span>2018-01-03 09:52</span>
                </div>
                <div style="font-size: 13px">
                  <span style="color: #a9b1be">截止时间：</span>
                  <span>2025-12-20 10:48</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 工作简报 -->
    <div class="work">
      <div class="df">
        <div class="t1"></div>
        <div class="p">工作简报</div>
        <div class="mt20 ml15">
          <div class="demo-date-picker">
            <div class="block">
              <span class="demonstration"></span>
              <el-date-picker
                v-model="value"
                type="datetimerange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="defaultTime"
              />
            </div>
          </div>
        </div>
        <!-- <div class="mt20 ml10" style="color: #ff4848">（注：日期默认当月）</div> -->
      </div>
      <!-- 图片 -->
      <div class="df">
        <div class="tiao">
          <p class="mt20 ml20">标讯查看量（条）</p>
          <p class="mt30 ml20 size">24</p>
        </div>
        <div class="jia">
          <p class="mt20 ml20">公司查看量（家）</p>
          <p class="mt30 ml20 size">24</p>
        </div>
        <div class="ci">
          <p class="mt20 ml20">数据导出（次）</p>
          <p class="mt30 ml20 size">0</p>
        </div>
        <div class="ding">
          <p class="mt20 ml20">标讯订阅量（条）</p>
          <p class="mt30 ml20 size">4</p>
        </div>
        <div class="sc">
          <p class="mt20 ml20">标讯收藏量（条）</p>
          <p class="mt30 ml20 size">0</p>
        </div>
      </div>
    </div>

    <!-- echarts -->
    <div class="df">
      <div class="bottom">
        <div class="df">
          <div class="t1"></div>
          <div class="p">订阅标讯数</div>
        </div>
        <div id="main" style="width: 95%; height: 90%"></div>
      </div>
      <div class="bottom1">
        <div class="df">
          <div class="t1"></div>
          <div class="p">项目处理状态</div>
        </div>
        <!-- 右侧图标 -->
        <div
          id="miright"
          style="width: 90%; height: 70%; margin-top: 90px"
        ></div>
      </div>
    </div>

    <!-- 弹出框 -->
    <el-drawer v-model="drawer2" title="" :size="drawe">
      <template #header>
        <div class="df2">
          <div class="t2"></div>
          <div class="p1">常用功能设置</div>
        </div>
      </template>
      <!-- 常用功能 -->
      <div class="use">
        <div class="userAdd">
          <!-- 头 -->
          <div class="add">已添加 (6)</div>
          <!-- 内容 -->
          <div class="icon">
            <div style="margin-left: 0">
              <img src="../../../assets/img/xinxi.png" alt="" />
              <p style="width: 12px; height: 12px">
                <img src="../../../assets/img/-.png" alt="" />
              </p>
              <div
                style="
                  font-size: 14px;
                  width: 100px;
                  margin-left: -5px;
                  margin-top: 10px;
                "
              >
                信息发布
              </div>
            </div>

            <div>
              <img src="../../../assets/img/积分.png" alt="" />
              <p style="width: 12px; height: 12px">
                <img src="../../../assets/img/-.png" alt="" />
              </p>
              <div
                style="
                  font-size: 14px;
                  width: 100px;
                  margin-left: -6px;
                  margin-top: 10px;
                "
              >
                我的积分
              </div>
            </div>
            <div>
              <img src="../../../assets/img/收藏.png" alt="" />
              <p style="width: 12px; height: 12px">
                <img src="../../../assets/img/-.png" alt="" />
              </p>
              <div
                style="
                  font-size: 14px;
                  width: 100px;
                  margin-left: -6px;
                  margin-top: 10px;
                "
              >
                收藏列表
              </div>
            </div>
            <div>
              <img src="../../../assets/img/订阅1.png" alt="" />
              <p style="width: 12px; height: 12px">
                <img src="../../../assets/img/-.png" alt="" />
              </p>
              <div
                style="
                  font-size: 14px;
                  width: 100px;
                  margin-left: -6px;
                  margin-top: 10px;
                "
              >
                订阅列表
              </div>
            </div>
            <div>
              <img src="../../../assets/img/设置2x.png" alt="" />
              <p style="width: 12px; height: 12px">
                <img src="../../../assets/img/-.png" alt="" />
              </p>
              <div
                style="
                  font-size: 14px;
                  width: 100px;
                  margin-left: -6px;
                  margin-top: 10px;
                "
              >
                订阅设置
              </div>
            </div>
            <div>
              <img src="../../../assets/img/设置推送2x.png" alt="" />
              <p style="width: 12px; height: 12px">
                <img src="../../../assets/img/-.png" alt="" />
              </p>
              <div
                style="
                  font-size: 14px;
                  width: 100px;
                  margin-left: -6px;
                  margin-top: 10px;
                "
              >
                推送设置
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- add -->
      <div class="add">
        <div style="margin: 20px 0 0 20px">功能</div>
        <!-- 信息发布 -->
        <div>
          <div class="mt20 ml20 df" style="justify-content: space-between">
            <div>
              <img src="../../../assets/img/xinxi.png" class="imgIcon" />
              <span class="ml10 fs14">信息发布</span>
            </div>
            <el-button
              class="button_btn"
              style="margin-right: 20px; color: #f43107"
            >
              添加
            </el-button>
          </div>
          <div class="dibu"></div>
        </div>
        <!-- 我的积分 -->
        <div>
          <div class="mt20 ml20 df" style="justify-content: space-between">
            <div>
              <img src="../../../assets/img/积分.png" class="imgIcon" />
              <span class="ml10 fs14">我的积分</span>
            </div>
            <el-button
              class="button_btn1"
              style="margin-right: 20px; color: #ff4848"
            >
              移除
            </el-button>
          </div>
          <div class="dibu"></div>
        </div>
        <!-- 收藏列表 -->
        <div>
          <div class="mt20 ml20 df" style="justify-content: space-between">
            <div>
              <img src="../../../assets/img/收藏.png" class="imgIcon" />
              <span class="ml10 fs14">收藏列表</span>
            </div>
            <el-button
              class="button_btn"
              style="margin-right: 20px; color: #f43107"
            >
              添加
            </el-button>
          </div>
          <div class="dibu"></div>
        </div>
        <!-- 订阅列表 -->
        <div>
          <div class="mt20 ml20 df" style="justify-content: space-between">
            <div>
              <img src="../../../assets/img/订阅1.png" class="imgIcon" />
              <span class="ml10 fs14">订阅列表</span>
            </div>
            <el-button
              class="button_btn1"
              style="margin-right: 20px; color: #ff4848"
            >
              移除
            </el-button>
          </div>
          <div class="dibu"></div>
        </div>
        <!-- 订阅设置 -->
        <div>
          <div class="mt20 ml20 df" style="justify-content: space-between">
            <div>
              <img src="../../../assets/img/设置2x.png" class="imgIcon" />
              <span class="ml10 fs14">订阅设置</span>
            </div>
            <el-button
              class="button_btn"
              style="margin-right: 20px; color: #f43107"
            >
              添加
            </el-button>
          </div>
          <div class="dibu"></div>
        </div>
        <!-- 推送设置 -->
        <div>
          <div class="mt20 ml20 df" style="justify-content: space-between">
            <div>
              <img src="../../../assets/img/设置推送2x.png" class="imgIcon" />
              <span class="ml10 fs14">推送设置</span>
            </div>
            <el-button
              class="button_btn1"
              style="margin-right: 20px; color: #ff4848"
            >
              移除
            </el-button>
          </div>
          <div class="dibu"></div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUpdated, onUnmounted } from "vue";
import { useRoute } from "vue-router";
import "../../../assets/com/com.scss";
import * as echarts from "echarts";
const route = useRoute();
const value = ref("");
const size = ref<"default" | "large" | "small">("default");
// 弹出框
const drawer2 = ref(false);
const drawe = ref("500px");

//日期
const defaultTime: [Date, Date] = [
  new Date(2000, 1, 1, 12, 0, 0),
  new Date(2000, 2, 1, 8, 0, 0),
]; // '12:00:00', '08:00:00'
const getCurrentDate = (): Array<string> => {
  let currentTimeRange = [] as Array<string>;
  const currentDate = new Date();

  // 获取当前月份
  const currentMonth = currentDate.getMonth() + 1; // 月份从 0 开始，所以需要加 1

  // 获取当前月份的起始时间
  const startTime = `${currentDate.getFullYear()}-${currentMonth
    .toString()
    .padStart(2, "0")}-01 00:00:00`;

  // 获取当前月份的终止时间
  const lastDay = new Date(
    currentDate.getFullYear(),
    currentMonth,
    0
  ).getDate();

  const endTime = `${currentDate.getFullYear()}-${currentMonth
    .toString()
    .padStart(2, "0")}-${lastDay.toString().padStart(2, "0")} 23:59:59`;
  currentTimeRange = [startTime, endTime];

  //返回当前月的起始 结束日期
  return currentTimeRange;
};

//初始化函数

function init() {
  // 基于准备好的dom，初始化echarts实例
  let Chart = echarts.init(document.getElementById("main"));

  // 绘制图表
  let options = {
    backgroundColor: "#fff",
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      top: "10%",
      right: "0%",
      left: "10%",
      bottom: "10%",
    },
    xAxis: [
      {
        type: "category",
        data: [
          "2022-01",
          "2022-02",
          "2022-03",
          "2022-04",
          "2022-05",
          "2022-06",
          "2022-07",
          "2022-08",
          "2022-09",
          "2022-10",
          "2022-11",
          "2022-12",
        ],
        axisLine: {
          lineStyle: {
            color: "#bcc2cc",
          },
        },
        axisLabel: {
          margin: 10,
          color: "#A9B1BE",
          textStyle: {
            fontSize: 14,
          },
        },
        axisTick: {
          show: false,
        },
      },
    ],
    yAxis: [
      {
        max: "60",
        min: "0",
        type: "value",
        name: "",
        nameTextStyle: {
          color: "#C1C6CF",
          fontSize: 12,
          align: "right",
          padding: 30,
        },
        axisLabel: {
          formatter: "{value}",
          color: "#A1A7B3",
          fontSize: 14,
        },

        axisTick: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#a9b1be",
          },
        },
        splitLine: {
          lineStyle: {
            color: "#fff",
            type: "dashed",
          },
        },
        scale: true, //自适应
      },
    ],
    series: [
      {
        type: "bar",
        data: [40, 51, 35, 45, 43, 38, 32, 46, 48, 45, 40, 46],
        barWidth: "22px",
        barCategoryGap: "150%",
        itemStyle: {
          color: "#6675FF",
          barBorderRadius: [2, 2, 0, 0],
        },
      },
    ],
  };

  // 渲染图表
  Chart.setOption(options);
  onUnmounted(() => {
    Chart.dispose();
  });

  // 自适应

  // window.onresize = Chart.resize;
  window.addEventListener("resize", function () {
    Chart.resize();
  });
}

// 右侧柱状图
function init1() {
  // 基于准备好的dom，初始化echarts实例
  let Chart1 = echarts.init(document.getElementById("miright"));
  // 绘制图表
  const options1 = {
    legend: {},
    grid: {
      top: "10%",
      right: "0%",
      left: "10%",
      bottom: "10%",
    },
    tooltip: {
      trigger: "axis",
    },
    dataset: {
      source: [
        ["2022-01", "联系中", "已合作", "已放弃", "未中标", "已中标", "不相关"],
        ["2022-02", 0, 0, 0, 0, 0, 0],
        ["2022-03", 0, 0, 0, 0, 0, 0],
        ["2022-04", 0, 0, 0, 0, 0, 0],
        ["2022-05", 0, 0, 0, 0, 0, 0],
        ["2022-06", 0, 0, 0, 0, 0, 0],
        ["2022-07", 0, 0, 0, 0, 0, 0],
        ["2022-08", 0, 0, 0, 1, 0, 1],
        ["2022-09", 0, 0, 0, 0, 0, 0],
        ["2022-10", 0, 0, 0, 0, 0, 0],
      ],
    },
    xAxis: {
      type: "category",
      axisPointer: {
        type: "line",
        lineStyle: {
          color: {
            type: "line",
            x: 1,
            y: 1,
            x2: 1,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(55, 66, 77, 0.2)",
              },
            ],
          },
          type: "solid",
          width: 100,
        },
      },
    },
    yAxis: [
      {
        max: "1",
        min: "0",
        type: "value",
        name: "",
        nameTextStyle: {
          color: "#C1C6CF",
          fontSize: 12,
          align: "right",
          padding: 30,
        },
        axisLabel: {
          formatter: "{value}",
          color: "#A1A7B3",
          fontSize: 14,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        splitLine: {
          lineStyle: {
            color: "#fff",
            type: "dashed",
          },
        },
        scale: true, //自适应
      },
    ],
    series: [
      { type: "bar", barWidth: 20 },
      { type: "bar", barWidth: 20 },
      { type: "bar", barWidth: 20 },
      { type: "bar", barWidth: 20 },
      { type: "bar", barWidth: 20 },
      { type: "bar", barWidth: 20 },
    ],
  };

  // 渲染图表
  Chart1.setOption(options1);
  onUnmounted(() => {
    Chart1.dispose();
  });

  // 自适应

  // window.onresize = Chart.resize;
  window.addEventListener("resize", function () {
    Chart1.resize();
  });
}

onMounted(() => {
  init();
  init1();
  getCurrentDate();
});
// onUpdated(() => {
//   init();
//   init1();
// });
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  background-color: #eef0f6;
  // height: calc(100vh - 145px);
  .top {
    height: 60px;
    background: #ffffff;
    display: flex;
    align-items: center;
    padding-left: 20px;
    box-sizing: border-box;
    margin-left: 10px;
    .btn {
      width: 114px;
      height: 30px;
      background: #f43107;
      border-radius: 4px;
      margin-left: 20px;
      border: 0;
    }
  }

  .header {
    margin: 10px;
    display: flex;
    .left {
      // width: 1018px;
      width: 55%;
      height: 180px;
      background: #ffffff;
      opacity: 1;
      border-radius: 0px;
    }
    .right {
      width: 45%;
      display: flex;
      .right1 {
        // width: 370px;
        width: 50%;
        height: 180px;
        background: #ffffff;
        opacity: 1;
        border-radius: 0px;
        margin-left: 10px;
      }
      .right2 {
        width: 50%;
        // width: 342px;
        height: 180px;
        background: #ffffff;
        margin-left: 10px;
      }
    }
  }

  // 工作简报
  .work {
    margin-left: 10px;
    // width: 1750px;
    height: 216px;
    background: #ffffff;
    opacity: 1;
    border-radius: 0px;
    margin-right: 10px;

    .tiao {
      margin: 20px 0 0 20px;
      width: 13.75rem;
      height: 120px;
      background: url(../../../assets/img/5434.png) no-repeat;
      background-size: 100% 100%;
      color: #ffffff;
    }
    .jia {
      margin: 20px 0 0 20px;
      background: url(../../../assets/img/5435.png) no-repeat;
      background-size: 100% 100%;
      width: 12.625rem;
      color: #ffffff;
      height: 120px;
    }
    .ci {
      margin: 20px 0 0 20px;
      background: url(../../../assets/img/5436.png) no-repeat;
      background-size: 100% 100%;
      width: 12.625rem;
      color: #ffffff;
      height: 120px;
    }
    .ding {
      margin: 20px 0 0 20px;
      background: url(../../../assets/img/5437.png) no-repeat;
      background-size: 100% 100%;
      width: 12.5rem;
      color: #ffffff;
      height: 120px;
    }
    .sc {
      margin: 20px 0 0 20px;
      background: url(../../../assets/img/5439.png) no-repeat;
      background-size: 100% 100%;
      width: 12.625rem;
      color: #ffffff;
      height: 120px;
    }
  }

  .bottom {
    margin-left: 10px;
    width: 50%;
    height: 514px;
    background: #ffffff;
    opacity: 1;
    border-radius: 0px;
    margin-top: 10px;
  }
  .bottom1 {
    margin-left: 10px;
    width: 50%;
    height: 514px;
    background: #ffffff;
    opacity: 1;
    border-radius: 0px;
    margin-top: 10px;
    margin-right: 10px;
  }
}

.p {
  margin: 20px 0 0 6px;
}
.t1 {
  width: 4px;
  height: 16px;
  background: #f43107;
  opacity: 1;
  border-radius: 10px;
  margin: 20px 0 0 20px;
}

.p1 {
  margin: 0 0 0 6px;
  font-size: 1rem;
}
.t2 {
  width: 4px;
  height: 16px;
  background: #f43107;
  border-radius: 10px;
  margin: 0 0 0 20px;
}

.df2 {
  display: flex;
  align-items: center;
  height: 56px;
  border-bottom: 2px solid #dddddd;
}

// 公共边距
.mar {
  width: 60px;
  height: 60px;
  width: 10%;
  margin: 30px 0 0 50px;
  img {
    width: 60px;
    height: 60px;
  }
}

.mt2 {
  font-size: 14px;
}
.ch {
  color: #a9b1be;
}
.black {
  color: #000;
}
.size {
  font-size: 30px;
  font-weight: bold;
}
.fs14 {
  font-style: 0.875rem;
}

.el-drawer__title {
  width: 4px;
  height: 16px;
  background: #f43107;
  opacity: 1;
  border-radius: 10px;
}

:deep(.el-drawer__body) {
  margin: 0;
  padding: 0;
}
:deep(.el-drawer__header) {
  margin: 0;
  padding: 0;
}

.use {
  height: 138px;
  border-bottom: 10px solid #eeeeee;
  .userAdd {
    .add {
      margin: 20px 0 0 20px;
      height: 14px;
      font-size: 0.875rem;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #333333;
    }
    .icon {
      margin: 20px 0 0 20px;
      display: flex;
      width: 90%;
      div {
        width: 38px;
        height: 38px;
        margin: 0 20px;
        position: relative;
        p {
          position: absolute;
          top: -5px;
          right: -7px;
        }
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}

// 添加
.add {
  // height: 75%;
  .imgIcon {
    width: 40px;
    height: 40px;
  }
  .button_btn {
    width: 52px;
    height: 24px;
    background: #ffffff;
    border: 1px solid #f43107;
    border-radius: 4px;
  }
  .button_btn1 {
    width: 52px;
    height: 24px;
    background: #ffffff;
    border: 1px solid #ff4848;
    color: #ff4848;
    border-radius: 4px;
  }
  .dibu {
    width: 460px;
    height: 1px;
    background: #dddddd;
    opacity: 1;
    border-radius: 0px;
    margin: 20px 0 0 20px;
  }
}
</style>
